/**
 * 评论列表的渲染和操作
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 * 3. 喜欢和不喜欢
 * */
import "./app.scss"
import avatar from "./assets/images/usericon.jpg"
import {useState} from "react";
import orderBy from 'lodash/orderBy'
// 评论列表数据
const defaultList = [{
    // 评论id
    rpid: 3, // 用户信息
    user: {
        uid: '13258165', avatar: require('./assets/images/usericon1.jpg'), uname: '周杰伦',
    }, // 评论内容
    content: '哎哟，不错哦', // 评论时间
    ctime: '10-18 08:15', // 喜欢数量
    like: 98, // 0：未表态 1: 喜欢 2: 不喜欢
    action: 0,
}, {
    rpid: 2, user: {
        uid: '36080105', avatar: require('./assets/images/usericon1.jpg'), uname: '许嵩',
    }, content: '我寻你千百度 日出到迟暮', ctime: '11-13 11:29', like: 88, action: 2,
}, {
    rpid: 1, user: {
        uid: '30009257', avatar, uname: '黑马前端',
    }, content: '学前端就来黑马', ctime: '10-19 09:00', like: 66, action: 1,
},]
// 当前登录用户信息
const user = {
    // 用户id
    uid: '30009257', // 用户头像
    avatar, // 用户昵称
    uname: '黑马前端',
}
// 导航 Tab 数组
const tabs = [{type: 'hot', text: '最热'}, {type: 'time', text: '最新'},]
const App = () => {
    const [list, setList] = useState(defaultList)
    // 导航高亮
    const [activeTab, setActiveTab] = useState('hot')
    // 发布textarea
    const [textareaValue, setTextareaValue] = useState('')
    // 发布
    const onPublish = () => {
        if (!textareaValue || textareaValue?.trim() === '') return alert('发布内容不能为空!')
        const date = new Date()
        const ctime = `${date.getDay() - 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
        setList([{
            rpid: new Date().getTime(), // 评论id
            user, // 用户信息
            content: textareaValue,  // 评论内容
            ctime, // 评论时间
            like: 0, // 喜欢数量
            action: 0, // 0：未表态 1: 喜欢 2: 不喜欢
        }, ...list])
        setTextareaValue("")
    }
    // tab 高亮切换
    const onCheckTab = (type) => {
        setActiveTab(type)
        let newList = []
        if (activeTab === 'hot') {
            newList = [...orderBy(list, 'ctime', 'desc')]
        } else {
            newList = [...orderBy(list, 'like', 'desc')]
        }
        setList(newList)
    }
    // 喜欢
    const onDoLike = (rpid) => {
        setList([...list.map(item => {
            if (item.rpid === rpid) {
                return {
                    ...item,
                    action: item.action === 1 ? 0 : 1,
                    like: item.action === 1 ? item.like - 1 : item.like + 1
                }
            }
            return item
        })])
    }
    // 不喜欢
    const onDislike = (rpid) => {
        setList([...list.map(item => {
            if (item.rpid === rpid) {
                return {
                    ...item,
                    action: item.action === 2 ? 0 : 2,
                    like: item.action === 1 ? item.like - 1 : item.like
                }
            }
            return item
        })])
    }

    // 删除评论
    const onDeleteComment = (rpid) => {
        setList([...list.filter(item => {
            return item.rpid !== rpid
        })])
    }
    return (<div className="app">
        {/* 导航 Tab */}
        <div className="reply-navigation">
            <ul className="nav-bar">
                <li className="nav-title">
                    <span className="nav-title-text">评论</span>
                    {/* 评论数量 */}
                    <span className="total-reply">{list.length}</span>
                </li>
                <li className="nav-sort">
                    {/* 高亮类名： active */}
                    {tabs.map(item => {
                        return (<div
                            key={item.type}
                            className={item.type === activeTab ? 'nav-item active' : 'nav-item'}
                            onClick={() => onCheckTab(item.type)}
                        >
                            {item.text}
                        </div>)
                    })}
                </li>
            </ul>
        </div>

        <div className="reply-wrap">
            {/* 发表评论 */}
            <div className="box-normal">
                {/* 当前用户头像 */}
                <div className="reply-box-avatar">
                    <div className="bili-avatar">
                        <img className="bili-avatar-img" src={avatar} alt="用户头像"/>
                    </div>
                </div>
                <div className="reply-box-wrap">
                    {/* 评论框 */}
                    <textarea
                        className="reply-box-textarea"
                        placeholder="发一条友善的评论"
                        value={textareaValue}
                        onChange={(val) => {
                            setTextareaValue(val.target.value)
                        }}
                    />
                    {/* 发布按钮 */}
                    <div className="reply-box-send" onClick={() => onPublish()}>
                        <div className="send-text">发布</div>
                    </div>
                </div>
            </div>
            {/* 评论列表 */}
            <div className="reply-list">
                {/* 评论项 */}
                {list.map(item => {
                    return (<div key={item.rpid} className="reply-item">
                        {/* 头像 */}
                        <div className="root-reply-avatar">
                            <div className="bili-avatar">
                                <img
                                    className="bili-avatar-img"
                                    src={item.user.avatar}
                                    alt=""
                                />
                            </div>
                        </div>

                        <div className="content-wrap">
                            {/* 用户名 */}
                            <div className="user-info">
                                <div className="user-name">{item.user.uname}</div>
                            </div>
                            {/* 评论内容 */}
                            <div className="root-reply">
                                <span className="reply-content">{item.content}</span>
                                <div className="reply-info">
                                    {/* 评论时间 */}
                                    <span className="reply-time">{item.ctime}</span>
                                    {/* 喜欢 */}
                                    <span className="reply-like">
                                    {/* 选中类名： liked */}
                                        <i
                                            className={item.action === 1 ? 'icon like-icon liked' : 'icon like-icon'}
                                            onClick={() => onDoLike(item.rpid)}
                                        />
                        <span>{item.like}</span>
                      </span>
                                    {/* 不喜欢 */}
                                    <span className="reply-dislike">
                        {/* 选中类名： disliked */}
                                        <i
                                            className={item.action === 2 ? 'icon dislike-icon disliked' : 'icon dislike-icon'}
                                            onClick={() => onDislike(item.rpid)}
                                        />
                      </span>
                                    {user.uid === item.user.uid && (<span
                                        className="delete-btn"
                                        onClick={() => onDeleteComment(item.rpid)}
                                    >
                          删除
                        </span>)}
                                </div>
                            </div>
                        </div>
                    </div>)
                })}
            </div>
            {list.length === 0 && <div className="reply-none">暂无评论</div>}{' '}
        </div>
    </div>)
}
export default App